<template>
	<view class="search-result-container">
		<!-- 顶部搜索栏 -->
		<searchBox v-model="query" @cancel="goBack" @confirm="search"></searchBox>
		<!-- 筛选 -->
		<view class="filter-box">
			<view @tap="changeFilter('default')" :class="{ active: filter === 'default' }">综合</view>
			<view @tap="changeFilter('sales')" :class="{ active: filter === 'sales' }">销量</view>
			<view @tap="changeFilter('price')" :class="{ active: filter === 'price' }">
				价格
				<view class="arrow-box">
					<view class="arrow up" :class="{ active: isUp }"></view>
					<view class="arrow down" :class="{ active: !isUp }"></view>
				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="result-box">
			<!-- 搜索结果 -->
			<view class="item" v-for="item in filterGoods" :key="item.goods_id" @tap="toDetail(item.goods_id)">
				<image :src="item.goods_small_logo"></image>
				<view class="right">
					<view class="title">{{ item.goods_name }}</view>
					<view class="price">
						¥
						<text>{{ item.goods_price }}</text>
						.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 组件
import searchBox from '../../components/searchBox.vue';
// key
import { KEY } from '../../utils/keys.js';
export default {
	components: {
		searchBox
	},
	data() {
		return {
			// 双向绑定
			query: '',
			// 页码
			pagenum: 1,
			// 页容量
			pagesize: 10,
			// 查询结果
			goods: [],
			// 是否加载中
			loading: false,
			// 筛选条件
			filter: 'default',
			// 箭头朝向
			isUp: true
		};
	},
	computed: {
		filterGoods() {
			// 每次弄个新数组
			const temArr = [...this.goods];
			// 逻辑
			switch (this.filter) {
				case 'default':
					return this.goods;
				case 'sales':
					temArr.sort((a, b) => {
						return a.goods_id - b.goods_id;
					});
					return temArr;
				case 'price':
					temArr.sort((a, b) => {
						if (this.isUp) {
							return a.goods_price - b.goods_price;
						}
						return b.goods_price - a.goods_price;
					});
					return temArr;
			}
			// 返回结果
		}
	},
	onLoad(option) {
		const { query } = option;
		// 设置获取到的数据
		this.query = query;
		// 查询数据
		this.queryData();
	},
	// 触底加载
	onReachBottom() {
		// 页码累加
		this.pagenum++;
		// 查询数据
		this.queryData();
	},
	methods: {
		// 去详情页
		toDetail(goods_id){
			uni.navigateTo({
				url:"../goodDetail/goodDetail?goods_id="+goods_id
			})
		},
		// 切换筛选条件
		changeFilter(newFilter) {
			// 如果之前不是price
			if (this.filter === 'price' && newFilter === 'price') {
				this.isUp = !this.isUp;
			}
			// 如果之前是price
			this.filter = newFilter;
		},
		// 查询数据
		queryData() {
			if (this.loading === true) {
				return;
			}
			this.loading = true;
			// 数据检索
			// loading效果
			uni.showLoading({
				mask: true
			});
			// 获取数据
			this.$request({
				url: '/api/public/v1/goods/search',
				method: 'get',
				data: {
					query: this.query,
					pagenum: this.pagenum,
					pagesize: this.pagesize
				}
			}).then(res => {
				// console.log('res:',res)
				this.goods = [...this.goods, ...res.goods];
				// 关闭loading
				uni.hideLoading();
				// 关闭loading
				this.loading = false;
			});
		},
		// 搜索数据
		search() {
			if (this.query === '') {
				return;
			}
			// 更新历史
			const history = uni.getStorageSync(KEY);
			// 添加并去重
			history.push(this.query);
			const set = new Set(history);
			uni.setStorageSync(KEY, [...set]);
		},
		goBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="less">
.search-result-container {
	// 把定位的间隙压下去
	padding-top: 184rpx;
	.search-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}
	// 筛选区域
	.filter-box {
		display: flex;
		height: 100rpx;
		border-bottom: 1rpx solid #dddddd;
		box-sizing: border-box;
		background-color: white;
		position: fixed;
		left: 0;
		width: 100%;
		top: 102rpx;
		> view {
			flex: 1;
			text-align: center;
			line-height: 100rpx;
			&.active {
				color: #ff2d4a;
			}
			// 最后一个格子
			&:last-child {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.arrow-box {
				margin-left: 10rpx;
			}
			// 箭头
			.arrow {
				width: 0;
				height: 0;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
				&.up {
					border-bottom: 12rpx solid #cccccc;
					margin-bottom: 10rpx;
					&.active {
						border-bottom-color: #666;
					}
				}
				&.down {
					border-top: 12rpx solid #cccccc;
					&.active {
						border-top-color: #666;
					}
				}
			}
		}
	}
	// 搜索结果
	.result-box {
		.item {
			display: flex;
			padding: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
			}
			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.price {
					color: #ff2d4a;
					font-size: 24rpx;
					text {
						font-size: 40rpx;
					}
				}
			}
		}
	}
}
</style>
